<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>修改</title>
</head>
<style>
    .error:after{
        content: '请输入整数';

    }
</style>
<body>
<div>
    <input type="hidden" id="id">
    <!--    叫隐藏域：用户看不到，只是用来存储数据-->

    <div>
        <label>
            姓名：<input type="text" id="name">
        </label>
    </div>
    <div>
        <label>
            性别：<input type="radio" name="sex" value="1" checked>男
            <input type="radio" name="sex" value="2" id="female">女
        </label>
    </div>

    <div>
        <label>
            <div >
            年龄：<input type="text" id="age">
            </div>
        </label>
    </div>

    <div>
        <label>
            大学：<input type="text" id="edu">
        </label>
    </div>

    <div>
        <label>
            学号：<input type="text" id="no">
        </label>
    </div>

    <div>
        <label>
            城市：
            <select name="city" id="city">
                <option value="1">北京</option>
                <option value="2">福州</option>
                <option value="3">厦门</option>
                <option value="4">龙岩</option>
                <option value="5">泉州</option>
            </select>
        </label>
    </div>
    <div>
        <button onclick="changeClick()">修改</button>
    </div>
</div>
<script src="ajax.js"></script>
<script src="common.js"></script>
<script>
    let age=document.querySelector("#age");
    age.onchange=function(e){
        let reg= /^\d+$/;
        let age=e.target.value;
        if(!reg.test(age)){
            e.target.parentNode.classList.add("error");
        }else{
            e.target.parentNode.classList.remove("error");
        }
    }

</script>
<script>
    window.onload = function () {
        let formData = new FormData();
        //调用common里 GetQueryString方法 获取ID
        let id = GetQueryString("id");
        formData.append("id", id);
       //定义回调函数
        function updateInput(data) {
            if (data.code == "200") {
                //获取Data里的参数
                let student = data.data;
                //获取每行文本的值
                document.querySelector("#name").value = student.name;
                //判断sex的checked值属于哪一个
                if (student.sex == 2) {
                    document.querySelector("#female").checked = "checked";
                }
                document.querySelector("#age").value = student.age;
                document.querySelector("#edu").value = student.edu;
                document.querySelector("#no").value = student.no;
                document.querySelector("#city").value = student.city;
            }else{
                //调用后台错误信息
                alert(data.msg);
            }
        }
        //调用ajax get.php，传参 定义好的formData和定义好的回调函数；
        ajax("/student/get.php", "POST", formData, updateInput);

    }
    let id = getQueryStringByName("id");
    if (!id) {
        location.href = "/StudentAdd.html"
    }
    // else{
    //     id.innerText="name";
    // }

    document.querySelector("#id").value = id;

    function changeClick() {
        change();
    }

    function changeRes(jsonObj) {
        alert("修改成功");
        window.location.href = "Studentlist.html"
    }

    function change() {
        let nameId = document.getElementById("name").value;
        let sexId = document.getElementsByName("sex");
        let ageId = document.getElementById("age").value;
        let eduId = document.getElementById("edu").value;
        let cityObj = document.getElementById("city");
        let cityId = cityObj.value;
        let numId = document.getElementById("no").value;

        let sexStr = 1;
        for (let i = 0; i < sexId.length; i++) {
            if (sexId[i].checked) {
                sexStr = sexId[i].value;
            }
        }

        let formData = new FormData();//表单数据对象，即键值对
        formData.append("id", id);
        formData.append("name", nameId);
        formData.append("sex", sexStr);
        formData.append("age", ageId);
        formData.append("edu", eduId);
        formData.append("city", cityId);
        formData.append("no", numId);
        ajax("student/update.php", "POST", formData, changeRes);
    }
</script>
</body>
</html>